<template>
  <div>
    <div v-hcode>
      <pre>
           <div class="copy-wrapper">
        <van-button
          type="primary"
          size="small"
          @click="handleCopy(codeHtml, $event)"
          >复制</van-button
        >
      </div>
        <code v-if="pre_code.content&&pre_code.type=='css'" class="css">
          {{pre_code.content | htmlToStr}}

        </code>
         <code v-if="pre_code.content&&pre_code.type=='javascript'" class="javascript">
          {{pre_code.content | htmlToStr}}
        </code>
          <code v-if="pre_code.content&&pre_code.type=='html'" class="html">
          {{pre_code.content | htmlToStr}}
        </code>
      </pre>
    </div>
  </div>
</template>
<script>
import clip from "@/util/clipboard"; // use clipboard directly
export default {
  props: {
    code: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data() {
    return {
      pre_code: this.code,
    };
  },
  watch: {
    code: {
      handler(n, o) {
        this.pre_code = n;
      },
      deep: true
    },
  },
  computed:{
    codeHtml(){
      var res = ''
      res = this.pre_code.content.replace(/<[^>]+>/gi, '\n');
      res = res.replace(/&lt;/gi, '<');
      res = res.replace(/&gt;/gi, '>');
      return res;
    }
  },
  filters: {
    htmlToStr(val) {
      if (val) {
        var res = ''
        res = val.replace(/<[^>]+>/gi, '\n');
        res = res.replace(/&lt;/gi, '<');
        res = res.replace(/&gt;/gi, '>');
        return res;
      }
    },
  },
  methods: {
    handleCopy(text, event) {
      clip(text, event);
    },
  },
};

</script>
<style>
</style>
